@import './variables.scss';

@mixin width($width) {
  width: $width;
}

/*通用无前缀*/
/*浮动*/
.fr {
  float: right;
}

.fl {
  float: left;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

/*文本*/
.tr {
  text-align: right;
}

.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

/*盒子*/
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.pointer {
  cursor: pointer;
}

.relative {
  position: relative;
}

/* flex */
.flex {
  display: flex;

  &-x {
    display: flex;
    flex-direction: row;

    &-start {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      &-center {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }

      &-end {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
      }
    }

    &-center {
      display: flex;
      flex-direction: row;
      justify-content: center;

      &-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

      &-end {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
      }
    }

    &-end {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      &-center {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }

      &-end {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }

    &-between {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      &-center {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      &-end {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
      }
    }
  }

  &-y {
    display: flex;
    flex-direction: column;

    &-start {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      &-center {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
      }

      &-end {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
      }
    }

    &-center {
      display: flex;
      flex-direction: column;
      align-items: center;

      &-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      &-end {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
      }
    }

    &-end {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      &-center {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
      }

      &-end {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
      }
    }
  }

  &-wrap {
    flex-wrap: wrap;
  }
}

//.flex {
//  display: flex;
//}
//
//.flex-x {
//  display: flex;
//  flex-direction: row;
//}
//
//.flex-y {
//  display: flex;
//  flex-direction: column;
//}
//
//.flex-x-start {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-start;
//}
//
//.flex-x-start-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-start;
//  align-items: center;
//}
//
//.flex-x-start-end {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-start;
//  align-items: flex-end;
//}
//
//.flex-x-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: center;
//}
//
//.flex-x-center-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: center;
//  align-items: center;
//}
//
//.flex-x-end {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-end;
//}
//
//.flex-x-end-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-end;
//  align-items: center;
//}
//
//.flex-x-between {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//}
//
//.flex-x-between-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//  align-items: center;
//}
//
//.flex-x-between-start {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-between;
//  align-items: flex-start;
//}
//
//.flex-x-around {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-around;
//}
//
//.flex-x-around-center {
//  display: flex;
//  flex-direction: row;
//  justify-content: space-around;
//  align-items: center;
//}
//
//.flex-y-start {
//  display: flex;
//  flex-direction: column;
//  align-items: flex-start;
//}
//
//.flex-y-start-center {
//  display: flex;
//  flex-direction: column;
//  align-items: flex-start;
//  justify-content: center;
//}
//
//.flex-y-center {
//  display: flex;
//  flex-direction: column;
//  align-items: center;
//}
//
//.flex-y-center-center {
//  display: flex;
//  flex-direction: column;
//  align-items: center;
//  justify-content: center;
//}
//
//.flex-y-end {
//  display: flex;
//  flex-direction: column;
//  align-items: flex-end;
//}
//
//.flex-y-end-center {
//  display: flex;
//  flex-direction: column;
//  align-items: flex-end;
//  justify-content: center;
//}
//
//.flex-y-between {
//  display: flex;
//  flex-direction: column;
//  justify-content: space-between;
//}
//
//.flex-y-around {
//  display: flex;
//  flex-direction: column;
//  justify-content: space-around;
//}
//
//.flex-wrap {
//  flex-wrap: wrap;
//}


/**通用有前缀*/
.app-w-350 {
  width: 350px !important;
}

.app-w-400 {
  width: 400px !important;
}

.app-tips {
  font-size: 12px;
  color: $lightFont;
  line-height: 16px;
}

.app-ellipsis-l1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
}

.app-ellipsis-l2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}

.app-ellipsis-l3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}

/*隐藏滚动*/
.app-hid-scrollbar-x {
  > .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}

.app-hid-scrollbar-y {
  > .el-scrollbar__wrap {
    overflow-y: hidden !important;
  }
}


/*在Chrome下移除input[number]的上下箭头*/
.app-hid-input-arrow::-webkit-outer-spin-button,
.app-hid-input-arrow::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

.app-hid-input-arrow input[type="number"]::-webkit-outer-spin-button,
.app-hid-input-arrow input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}

/*在firefox下移除input[number]的上下箭头*/
.app-hid-input-arrow {
  -moz-appearance: textfield;
}

.app-hid-input-arrow input[type="number"] {
  -moz-appearance: textfield;
}
